<template>
  <div id="nav">App</div>
   <!-- 1.1使用子模块A state的数据 -->
  <p>{{$store.state.moduleA.username}}</p>
   <!-- 1.2使用子模块A getters的数据 -->
  <p>{{$store.getters.newName}}</p>
   <!-- 2.1使用子模块B state的数据 -->
  <p>{{$store.state.moduleB.username}}</p>
   <!-- 2.2使用子模块B getters的数据 -->
  <p>{{$store.getters['moduleB/newName']}}</p>
  <!-- 2.3提交子模块B mutations函数 -->
  <button @click="mutationsFn">mutationsFn</button>
   <!-- 2.4调用子模块B actions函数 -->
 <button @click="actionsFn">actionsFn</button>
</template>
<script>
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup () {
    const store = useStore()
    const mutationsFn = () => {
      // 提交根模块mutations函数
      store.commit('moduleB/updateUsername')
    }
    const actionsFn = () => {
      // 调用根模块actions函数
      store.dispatch('moduleB/updateUsername2')
    }
    return { mutationsFn, actionsFn }
  }
}
</script>
